$(function() {
    initArtCateList()
    console.log(location.href);
    console.log(location.href.split(`?`)[1]);
    let id = location.href.split(`?`)[1]
    axios({
        method: `get`,
        url: `/my/article/${id}`,
    }).then(({ data: res }) => {
        console.log(res.data);
        if (res.status !== 0) {
            return layui.layer.msg(res.message)
        }
        layui.form.val(`editForm`, res.data)
        setTimeout(function() {
            tinyMCE.activeEditor.setContent(res.data.content)
        }, 500)
        let baseURL = `http://api-breakingnews-web.itheima.net`
        let url = baseURL + res.data.cover_img
        var img = $('#image')
        img
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', url) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })

    function initArtCateList() {
        axios({
            method: `get`,
            url: `/my/article/cates`
        }).then(({ data: res }) => {
            if (res.status !== 0) {
                return layui.layer.msg(res.message)
            }
            let arr = [`<option value="">请选择文章类别</option>`]
            res.data.forEach(ele => {
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `)
            })
            let str = arr.join(``)
            $(`[name=cate_id]`).empty().html(str)
            layui.form.render()
        })
    }
    //初始化富文本编辑器
    initEditor()
        //初始化图片编辑器
        // 1. 初始化图片裁剪器
    var img = $('#image')
        // 2. 裁剪选项
    var options = {
            aspectRatio: 400 / 280,
            preview: '.img-preview'
        }
        // 3. 初始化裁剪区域
    img.cropper(options)
        // 点击按钮赋值状态
    let state = ``
    $(`#btn1`).on(`click`, function() {
        state = `已发布`
    })
    $(`#btn2`).on(`click`, function() {
        state = `草稿`
    })
    $(`#formPub`).on(`submit`, function(e) {
            e.preventDefault()
                // 创建FormeData对象
            let fd = new FormData(this)
                // console.log(...fd);
                // 添加状态字段
            fd.append(`state`, state)
            fd.append(`Id`, id)
                // console.log(...fd);
                // 文章封面格式blob二进制
            img
                .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                    width: 400,
                    height: 280
                })
                .toBlob(function(blob) { // 将 Canvas 画布上的内容，转化为文件对象
                    // 得到文件对象后，进行后续的操作
                    fd.append(`cover_img`, blob)
                    console.log(...fd);
                    axios({
                        method: `post`,
                        url: `/my/article/edit`,
                        data: fd
                    }).then(({ data: res }) => {
                        if (res.status !== 0) {
                            return layui.layer.msg(res.message)
                        }
                        layui.layer.msg(`修改文章成功`)
                            // 跳转到文章列表页
                            // 原生js
                        window.parent.document.querySelector(`#art_list`).click()
                    })
                });
        })
        //选择图片
    $(`#chooseImageBtn`).on(`click`, function() {
        $(`#chooseImageInp`).click()
    })
    $(`#chooseImageInp`).on(`change`, function(e) {
        // 取得用户选择文件
        var file = e.target.files[0]
            // 非空校验
        if (file == undefined) {
            return layui.layer.msg(`文章内容不能为空`)
        }
        var newImgURL = URL.createObjectURL(file)
        img
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })

})